*{
  margin:0;
  padding:0;
  font-family: "Microsoft YaHei";

}

.clearfix:after{
  content:"";
  display: block;
  height:0;
  visibility: hidden;
  clear: both;
}
a{
  text-decoration: none;
  color:#aaa;
  font-size: 12px;  
}
li {
  list-style: none;
}
body{
  background-color: #f3f5f7;
}
.w{
  width:1200px;
  margin: 0 auto;
}
.header{
  margin:30px auto;
  height:42px;
  /* background-color: pink; */
}
.logo{
  margin-right:60px;
  float: left;
}
.nav{
  margin-right:75px;
  float: left;
}
.nav ul li{
  margin-right:20px;
  float: left;
}
.nav ul li a{
  display: block;
  height:40px;
  padding: 0 10px ;
  color:#050505;
  font-size: 18px;
  line-height: 40px;
  font-family: "微软雅黑"; 
}
.nav ul li a:hover{
  border-bottom: 2px solid #00a4ff;
}
.search {
  margin-right:30px;
  float: left;
  width:410px;
  height:42px; 
}
.search input{
  /* float: left; */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width:338px;
  height:40px;
  border:1px solid #00a4ff;
  padding-left: 20px;
  vertical-align: top;
  outline:none;
}
.search button{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* float: left; */
  width: 50px;
  line-height: 40px;
  height:42px;
  border: 0;
  /* border:1px solid #00a4ff; */
  background: #00a4ff url(./images/search.png) no-repeat center center;
  outline:none;
}
.user{
  float: left;
  
}
.user a{
  display: block;
  height:42px;
  line-height: 38px;
  color:#050505;
}
.user a img{
  border-radius: 50%;
  vertical-align: middle;
  transition: all 0.3s;
}
.user a img:hover{
  transform:rotateZ(360deg);
}

/* banner */
.banner {
  height:420px;
  background-color: #1c036c;
}
.banner .bg{
  width:1200px;
  height:420px;
  background: url(./images/banner2.jpg) no-repeat top center;
}
.banner .bg .nav-left{
  float: left;
  width:150px;
  padding:20px;
  height:380px;
  background-color: rgba(0,0,0,.3);
}
.banner .bg .nav-left ul li{
  
  padding:10px 0;
}
.banner .bg .nav-left ul li a{
 
  font-size: 14px;
  color:#fff;
}
.banner .bg .nav-left ul li a span{
  float: right;
}
.banner .bg .nav-left ul li:hover a{
  color:#00b4ff;
}
.banner .bg .kecheng{
  /* padding:0px 16px;; */
  float: right;
  width:228px;
  height:300px;
  background-color: #fff;
  margin-top:50px;
}
 .myClass-top{
   
  font-size: 18px;
  font-weight: 700;
  color:#fff;
  text-align: center;
  width:228px;
  height:45px;
  line-height: 45px;
  background-color: #9bceea;
}
.box{
  padding: 15px 13px;

}
.class ul{
  /* margin: 14px 0; */
  padding-top:10px;
  
}
.class ul li{
  margin-top:15px;
  height:42px;
  border-bottom: 1px solid #e7e7e7;
}
.class h2{
      color: #494949;
    /*float: left;*/
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}
.class p{
  color:#e7e7e7;
  font-size: 12px;
}
.all{
  margin-top:6px;
  margin-bottom:12px;
  text-align: center;
  border:1px solid #00a4ff;
 
}
.all a{
  display: block;
  width:100%;
  height:100%;
  color:#00a4ff;
  padding:5px 0;
  
}
.all a:hover{
  background-color: #00a4ff;
  color:#fff;
}

/* 精品推荐 */
.recommend {
  margin-top:8px;
  width:1200px;
  height:60px; line-height: 60px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,.1)
}
.recommend ul li{
  float: left;
  /* height:60px; */
 
}
.recommend ul li a{
  /* display: block; */
  padding:0 35px;
  color:#050505;  
  /* font-weight: 700; */
  font-size: 16px;
  border-right:1px solid #bfbfbf;
}
.recommend ul li a:hover{
  color:#00a4ff;
}
.recommend .left li .no-line{
  border:0;
}
.recommend .right li{
  float: right;
}
.recommend .right li a{
  color:#00a4ff;
  font-size: 16px;border:0;
}
.tuijian{
  margin-top:40px;
  width:1200px;
  height:40px;
  line-height: 40px;
}
.tuijian h2{
  color:#494949;
  float: left;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}
.tuijian a{
  color:#bcbcbd;
  float: right;
  font-size: 12px;
  margin-right:35px;
}
.tuijian a:hover{
  color:red;
}
.produce {
  /* margin-top:30px; */
  /* display: flex;
  justify-content: initial; */
  width:1200px;
}
.produce .box-hd {
  margin-bottom: 20px;
}

.produce .box-hd h2{
  float: left;
  line-height: 60px;
   font-weight: 200;
   font-family: "Microsoft YaHei";
   font-style: normal;
}
.produce .box-hd a{
  line-height: 60px;
}
.prdouce-1 {
  float: left;
  position: relative;
  margin-left:15px;
  margin-bottom: 20px;
  width:228px;
  height:255px;
  /* background: pink; */
  transition: all 0.2s ease;
}
.prdouce-1:hover{
  transform: translateY(-2px);
  box-shadow: 0px 6px 4px rgba(0,0,0,.2);
}
.prdouce-1:nth-child(5n){
  margin-right: 0;
}
.produce-top{
 
  height:155px;
}
.produce-top img{
  width:228px;
  height:155px;
}
.produce-top .hot{
   position: absolute;
   top:2px;
   right:-4px;
  width:40px;
  height:24px;
}
.produce-bottom{
  padding:15px 15px 0 15px;;
  /* height:85px; */
  background: #fff;
}
.produce-bottom h4{
  font-size: 14px;
  padding: 10px 0;
}
.produce-bottom p{
  padding-bottom: 10px; 
}
.produce-bottom p em{
  font-size: 12px;
  color:#ff7c2d;
  font-style: normal;
}
.produce-bottom p span{
  font-size: 12px;
  color:#999;
}

.box{
  /* background:pink; */
}
.box .box-hd{
  height:60px;

 
  /* background:red; */
}
.box .box-hd .left{
  float: left;
  line-height:60px;
  height:60px;
  width:230px;
  font-weight: 300;
  font-size: 20px;
  /* background-color: cyan; */
}
.box-hd .box-title{
  float: right;
  height:60px;
  width:955px;
  /* background-color: #0f0; */
}
.box-hd .box-title .middle{
  height:60px;
  line-height: 60px;
  float: left;
  margin:0 220px;
}
.box-hd .box-title .middle li{
  display: inline-block;
  padding:0 37px;
  /* float: left;
   */
}
.box-hd .box-title .middle li a{
  color:#979898;font-size: 16px;
}
.box-hd .box-title .middle li a:hover{
  color:#00a4ff;
  
}
/* .box .box-hd .middle{
  width:972px;
  background-color: #0f0;
  float: left;
} */
.box .box-hd .right{
  float: right;
  height:60px;
  line-height: 60px;
}
.box .box-hd .right a{
  color:#979898;
  padding-right:28px;
  font-size: 12px;
}
.box .box-bd{
  height:392px;
  /* background: purple; */
}
.box .box-bd .img-left{
  float: left;
}
.box .box-bd .img-left img{
  width:230px;
  height:392px;
}
.box .box-bd .img-right{
  float: right;
  width:970px;
  height:392px;
  background-color: #fff;
}
/* 957*100 */
.box .box-bd .img-right .top img{
  float: right;
}
.box .box-bd .img-right .bottom li{
  float: left;
  margin-left: 15px;
  margin-top:20px;
  width:227px;
  height:269px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
}
.box .box-bd .img-right .bottom li a{
  display: block;
  width: 100%;
  height:100%;
}
.box .box-bd .img-right .bottom ul{
  float: right;
}
.box .box-bd .img-right .bottom li img{
  width:227px;
}
.box .box-bd .img-right .bottom li h4{
  margin:15px;
  font-size: 16px;
  font-weight: 400;
  color:#333;
}
.box .box-bd .img-right .bottom li p{
  font-size: 12px;
  color: #999999;
  margin : 0 15px;
}
.box .box-bd .img-right .bottom li p em{
  font-style: normal;
  color:red;
}
.sidebar{
  position: fixed;
  top:200px;
  left:50%;
  margin-left:-760px;
  width:110px;
  height:425px;
  background-color: #fff;
  padding:15px;
  box-shadow: 2px 2px 2px rgba(0,0,0,.3);
  text-align:center;
}
.sidebar ul li{
  height:40px;
  font-size: 14px;
}
.sidebar ul li a{
  color:#333;
}
.sidebar ul li a:hover{
  color:#00a4ff;
}
.footer{
  margin-top:40px;
  height: 386px;
  padding-top:30px;
  padding-left:20px;
  background-color: #fff;
}
.footer .left{
  float: left;
}
.footer .left img{
  margin-bottom:15px;
}
.footer .left p{
  margin-bottom:15px;
  font-size: 12px;
  color:#868686;
}
.footer .left a{
  display: block;
  width:118px;
  height:34px;
  color:#00a4ff;
  border:1px solid #00a4ff;
  text-align: center;
  line-height: 34px;
}
.footer .left a:hover{
  color:#fff;
  background-color: #00a4ff;
}
.footer .right{
  margin-right:30px;
  float: right;
}
.footer .right dl{
  float: left;
  margin-left: 100px;
}
.footer .right dl dt{
  margin-bottom:15px;
}
.footer .right dd {
  line-height: 20px;  
}
.footer .right dd a:hover{
  color:#00a4ff;
}